<template>
  <div class="activity-container">
    <div class="header">
      <div class="back-btn btn-sword" @click="goBack">返回</div>
      <div class="title brush-title">等级成长奖励</div>
      <div class="placeholder"></div>
    </div>

    <div class="panel-container">
      <div class="panel-header">
        <div class="panel-title">等级成长奖励</div>
      </div>

      <div class="level-reward-list">
        <div 
          v-for="(item, idx) in levelRewards" 
          :key="idx" 
          class="level-reward-item"
        >
          <div class="level">等级{{ item.level }}</div>
          <div class="reward">奖励：{{ item.reward }}</div>
          <div 
            class="claim-btn" 
            :class="{ disabled: !item.claimable, claimed: item.claimed }"
            @click="claimLevelReward(item)"
          >{{ item.claimed ? '已领取' : (item.claimable ? '领取' : '未达成') }}</div>
        </div>
      </div>

      <div class="bottom-tip">等级奖励根据角色等级解锁</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelRewards: [
        { level: 10, reward: '灵石×300', claimable: true, claimed: false },
        { level: 20, reward: '功德×50', claimable: false, claimed: false },
        { level: 30, reward: '法宝×1', claimable: false, claimed: false }
      ]
    }
  },
  methods: {
    goBack() { uni.navigateBack() },
    claimLevelReward(item) {
      if (!item.claimable || item.claimed) {
        uni.showToast({ title: item.claimed ? '已经领取过了' : '未达到领取条件', icon: 'none' })
        return
      }
      setTimeout(() => {
        item.claimed = true
        uni.showToast({ title: '领取成功', icon: 'success' })
      }, 300)
    }
  }
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');
.activity-container { padding-bottom: 30rpx; }
.header { display:flex; justify-content:space-between; align-items:center; padding:30rpx 40rpx; }
.placeholder{ width:80rpx; }
.panel-container { padding: 20rpx; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 20rpx; }
.panel-title { font-weight: 600; }
.level-reward-list { display:flex; flex-direction:column; gap: 16rpx; }
.level-reward-item { display:flex; justify-content:space-between; padding: 20rpx; border: 1px solid #eee; border-radius: 12rpx; }
.level{ font-weight: 600; }
.reward{ color:#666; }
.claim-btn { padding: 10rpx 20rpx; background:#409eff; color:#fff; border-radius: 8rpx; }
.claim-btn.disabled { background:#909399; }
.claim-btn.claimed { background:#67c23a; }
.bottom-tip{ margin-top: 20rpx; color:#888; font-size: 24rpx; }
/* 统一武侠风与白卡片样式 */
.activity-container {
  min-height: 100vh;
  background-color: #f8f6f1;
  background-image: radial-gradient(circle at 20% 15%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%),
                    radial-gradient(circle at 80% 85%, rgba(0,0,0,0.04) 0, rgba(0,0,0,0.0) 60%);
  padding-bottom: 30rpx;
}
.header { color:#4b3a2a; border-bottom:1rpx solid #d8c7a3; }
.brush-title { font-family:'Ma Shan Zheng','Kaiti SC','STKaiti',serif; font-size:40rpx; color:#2e1a0f; letter-spacing:2rpx; }
.btn-sword { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:10rpx 32rpx 10rpx 28rpx; background:#6b4f3b; color:#fff; border-radius:8rpx; border:1rpx solid #4b3a2a; overflow:visible; }
.btn-sword::before{ content:""; position:absolute; right:-14rpx; top:50%; transform:translateY(-50%); width:0; height:0; border-top:10rpx solid transparent; border-bottom:10rpx solid transparent; border-left:14rpx solid #6b4f3b; }
.btn-sword::after{ content:""; position:absolute; left:-10rpx; top:50%; transform:translateY(-50%); width:6rpx; height:26rpx; background:#4b3a2a; border-radius:2rpx; }
.panel-container { margin:30rpx; padding:34rpx; border-radius:16rpx; background:#fff; border:1rpx solid #e2d6bd; box-shadow:0 6rpx 20rpx rgba(75,58,42,0.08); }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom: 24rpx; }
.level-reward-list { display:flex; flex-wrap:wrap; gap: 24rpx; }
.level-reward-item { padding: 24rpx; border: 1rpx solid #d8c7a3; border-radius: 12rpx; background:#fbf9f3; box-shadow:0 4rpx 12rpx rgba(75,58,42,0.06); }
.level { color:#2e1a0f; }
.reward { color:#7a6a5c; }
.claim-btn { padding:10rpx 20rpx; background:#6b4f3b; color:#fff; border-radius:8rpx; border:1rpx solid #4b3a2a; }
.claim-btn.disabled { background:#909399; }
.claim-btn.claimed { background: linear-gradient(90deg, #8c6b52 0%, #6b4f3b 100%); }
.bottom-tip{ margin-top: 20rpx; color:#7a6a5c; font-size: 24rpx; text-align:center; }
</style>